<template>
  <div class="mydemo">
    <div class="clock" :class="c">
      <div class="v n1">
        <div class="u"></div>
        <div class="d"></div>
      </div>
      <div class="v n2">
        <div class="u"></div>
        <div class="d"></div>
      </div>
      <div class="h n3">
        <div class="l"></div>
        <div class="r"></div>
      </div>
      <div class="v n4">
        <div class="u"></div>
        <div class="d"></div>
      </div>
      <div class="v n5">
        <div class="u"></div>
        <div class="d"></div>
      </div>
      <div class="h n6">
        <div class="l"></div>
        <div class="r"></div>
      </div>
      <div class="h n7">
        <div class="l"></div>
        <div class="r"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "numberL",
    props: ['c']
  }
</script>

<style scoped>
  .mydemo {
    color: #33ffff;
    display: inline-block;
  }

  .clock {
    display: inline-block;
    font-size: 14%;
    width: 9em;
    height: 14em;
    position: relative;
  }

  .clock div {
    position: absolute;
    border-style: solid;
  }

  .clock .l,
  .clock .r,
  .clock .u,
  .clock .d {
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .clock .v {
    width: 0;
    height: 5em;
    border-width: 0 0.5em;
    border-color: #33ffff;
  }

  .clock .v .u {
    border-style: dotted dotted solid dotted;
    border-width: 0 0.5em 0.5em;
    border-color: transparent transparent #33ffff transparent;
    top: -0.5em;
    left: -0.5em;
  }

  .clock .v .d {
    border-style: solid dotted dotted dotted;
    border-width: 0.5em 0.5em 0 0.5em;
    border-color: #33ffff transparent transparent transparent;
    left: -0.5em;
    bottom: -0.5em
  }

  .clock .h {
    width: 5.5em;
    height: 0;
    border-width: 0.5em 0;
    border-color: #33ffff;
  }

  .clock .h .l {
    border-style: dotted solid dotted dotted;
    border-width: 0.5em 0.5em 0.5em 0;
    border-color: transparent #33ffff transparent transparent;
    top: -0.5em;
    left: -0.5em;
  }

  .clock .h .r {
    border-style: dotted dotted dotted solid;
    border-width: 0.5em 0 0.5em 0.5em;
    border-color: transparent transparent transparent #33ffff;
    top: -0.5em;
    right: -0.5em;
  }

  .clock .n1 {
    left: 0.5em;
    top: 1.5em;
  }

  .clock .n2 {
    left: 0.5em;
    top: 7.5em;
  }

  .clock .n4 {
    left: 7.5em;
    top: 7.5em;
  }

  .clock .n5 {
    left: 7.5em;
    top: 1.5em;
  }

  .clock .n6 {
    top: 0.4em;
    left: 1.8em;
  }

  .clock .n3 {
    top: 12.5em;
    left: 1.8em;
  }

  .clock .n7 {
    top: 6.5em;
    left: 1.8em;
  }

  .c1 .n1,
  .c1 .n2,
  .c1 .n3,
  .c1 .n6,
  .c1 .n7 {
    display: none
  }

  .c2 .n1,
  .c2 .n4 {
    display: none
  }

  .c3 .n1,
  .c3 .n2 {
    display: none
  }

  .c4 .n2,
  .c4 .n3,
  .c4 .n6 {
    display: none
  }

  .c5 .n2,
  .c5 .n5 {
    display: none
  }

  .c6 .n5 {
    display: none
  }

  .c7 .n1,
  .c7 .n2,
  .c7 .n3,
  .c7 .n7 {
    display: none
  }

  .c8 {
  }

  .c9 .n2 {
    display: none
  }

  .c0 .n7 {
    display: none
  }
</style>
